<script>
import moment from 'moment'
import UserService from '@/request/user/user'
import { mapGetters } from 'vuex'
const curstore = 'adminStore/UserUserStore'
export default {
  name: 'UserUser',
  computed: mapGetters(curstore, {
    pagination: 'pagination'
  }),
  data () {
    return {
      listLoading: false,
      list: []
    }
  },
  created: function () {
    this.listUser()
  },
  watch: {
  },
  methods: {
    listUser () {
      let self = this
      self.listLoading = true
      UserService.list({
        pageOffset: self.pagination['current'],
        pageSize: self.pagination['size']
      }).then(data => {
        self.list = [].concat(data.content)
        self.$store.dispatch(curstore + '/updatePagination', {total: data['totalElements'] || 0})
        self.listLoading = false
      }, err => {
        console.log(err)
        self.listLoading = false
      })
    },
    handleCurrentChange: function (val) {
      var self = this
      self.$store.dispatch(curstore + '/updatePagination', {current: val}).then(function () {
        self.listUser()
      })
    },
    handleSizeChange: function (val) {
      var self = this
      self.$store.dispatch(curstore + '/updatePagination', {size: val}).then(function () {
        self.listUser()
      })
    },
    dateFormatter: function (row, column, cellValue, index) {
      if (cellValue) {
        return moment(cellValue).format('YYYY年MM月DD日')
      } else {
        return ''
      }
    }
  }
}
</script>

<template>
  <el-container>
    <el-main class="scrollbar-wrap nopadding">
      <el-scrollbar class="full-scrollbar">
        <!-- 列表 -->
        <el-table :data="list" border v-loading.body="listLoading" stripe style="width: 100%;">
          <el-table-column type="index" width="60" align='center'></el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="birthday" label="生日"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" :formatter="dateFormatter" width="180"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button size="small" type="text" style="color: #FF4949;">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
    <el-footer height="35px">
      <!--分页-->
      <el-col :span="24" class="admin-toolbar toolbar">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current" :page-sizes="pagination.sizes" :page-size="pagination.size" :layout="pagination.layout" :total="pagination.total"></el-pagination>
      </el-col>
    </el-footer>
  </el-container>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
